<template>
	<view class="insurance">
		<!--首页 保险 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">保险</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<scroll-view scroll-y="true" :style="{ height: containerHeight }">
				<view class="w-100 b-box" style="padding-bottom:128rpx ;">
					<view style="height: 778rpx;z-index: 10;" class="w-750 b-box">
						<image :src="require('../static/bx.png')" style="width: 750rpx;height: 778rpx;"></image>
					</view>
					<view style="" class="w-100 b-box">
						<view style="padding: 0 36rpx;" class="b-box w-100 bg-ff">
							<view
								class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff"
								style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
							>
								<text
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 100rpx;"
								>
									姓名
								</text>
								<u-input
									border="none"
									placeholder="请填写姓名"
									v-model="uname"
									placeholderStyle="color: #555555;fontWeight: 400;fontsize: 30px;fontfamily:PingFang SC-Regular, PingFang SC"
									:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
								></u-input>
							</view>
							<view
								class="d-flex flex-r ali-i-c just-c b-box w-100 bg-ff"
								style="border-bottom: 2rpx solid #EEEEEE;height: 112rpx;"
							>
								<text
									class="pf-sc fw-400"
									style="font-size: 30rpx;color: rgba(0,0,0,0.9000);margin-right: 40rpx;"
								>
									联系手机
								</text>
								<u-input
									border="none"
									placeholder="请输入您的联系手机"
									placeholderStyle="color:#555;fontWeight:400;fontsize:30px;fontfamily:PingFang SC-Regular, PingFang SC;"
									:customStyle="{ color: 'rgba(0,0,0,0.9000)', font: '400 30rpx PingFang SC' }"
									v-model="uphone"
								></u-input>
							</view>
						</view>
					</view>
					<!-- 选择 -->
					<view
						class="d-flex flex-r ali-i-c just-ev b-box w-100 bg-ff"
						style="height: 112rpx;margin-bottom: 60rpx;padding: 0 36rpx;"
					>
						<view
							class="d-flex flex-r ali-i-c just-s"
							v-for="(item, index) in insrance"
							:key="index"
						>
							<view
								@click="SelectCurrent(index)"
								:class="{ actived: selected === index + 1 }"
								style="width: 40rpx;height: 40rpx;border-radius: 40rpx;border: 2rpx solid #999999;margin-right: 12rpx;"
							></view>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">{{ item }}</text>
						</view>
					</view>

					<!-- btn -->
					<view class="w-100 b-box d-flex flex-c ali-i-c just-sw">
						<u-button
							:throttleTime="700"
							@click="Submit"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="提交"
						></u-button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getinsurance } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uInput from '../components/uview-ui/components/u-input/u-input';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-input': uInput
	},
	data() {
		return {
			containerHeight: '',
			selected: null,
			uname: '',
			uphone: '',
			insrance: ['交强险', '商业险', '交强险+商业险']
		};
	},
	methods: {
		Submit() {
			//任何一个为空不在继续执行
			if (this.uname === '' || this.uphone === '' || this.selected === null) {
				uni.showToast({
					title: '请填写完整的信息',
					icon: 'none'
				});
				return;
			}
			let reg = /^1[3-8]\d{9}$/;
			if (!reg.test(this.uphone)) {
				uni.showToast({
					title: '请填写正确的手机号',
					icon: 'none'
				});
				return;
			}
			//验证完毕开始发送提交请求
			let params = {
				token: uni.getStorageSync('usertoken'),
				name: this.uphone,
				mobile: this.uphone,
				status: this.selected + 1
			};
			getinsurance(params)
				.then(res => {
					//如果提交成功跳转到指定的页面
					console.log(res);
					if (res.data.code === 1) {
						uni.navigateTo({
							url: '/userModelA/userA/SubmitSuccess/SubmitSuccess'
						});
					}
				})
				.catch(() => {
					uni.showToast({
						title: '抱歉请重新提交！',
						icon: 'error'
					});
				});
		},
		SelectCurrent(index) {
			//当前选中项

			this.selected = index + 1;
			console.log(this.selected);
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
	}
};
</script>

<style lang="scss">
.insurance {
	.actived {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #436fb8 !important;
		&::before {
			content: '';
			width: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			background-color: #436fb8;
		}
	}
}
</style>
